<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <title>Welcome to toonWatch.com</title>
    <link rel = "stylesheet" href ="
          <g:createLinkTo dir='css' file='loginStyle.css' />
          " />
    <!-- Meta -->
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <!-- Scripts -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.easyAccordion.js"></script>
    <script type="text/javascript" src="../../js/utility.js"></script>
    <script>
              $(document).ready(function() {
            //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="../../images/close_pop_bw.png" class="btn_close" title="Close Window" alt="Close" /></a>');

        //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

        return false;
    });

    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
        });
        return false;
    });
    });
    </script>
  </head>
  <body>
    <div id="paint-top" align="center">
      <img src="../../images/toonwatch_logo.png"/>
      <div>
        <div id="flashContent" align="center">
          <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="850" height="400" id="loginflash" align="middle">
            <param name="movie" value="http://toonwatch.comp.nus.edu.sg/flash/loginflash.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="true" />
            <param name="loop" value="true" />
            <param name="wmode" value="transparent" />
            <param name="scale" value="showall" />
            <param name="menu" value="true" />
            <param name="devicefont" value="false" />
            <param name="salign" value="" />
            <param name="allowScriptAccess" value="sameDomain" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="http://toonwatch.comp.nus.edu.sg/flash/loginflash.swf" width="850" height="400">
              <param name="movie" value="http://toonwatch.comp.nus.edu.sg/flash/loginflash.swf" />
              <param name="quality" value="high" />
              <param name="bgcolor" value="#ffffff" />
              <param name="play" value="true" />
              <param name="loop" value="true" />
              <param name="wmode" value="transparent" />
              <param name="scale" value="showall" />
              <param name="menu" value="true" />
              <param name="devicefont" value="false" />
              <param name="salign" value="" />
              <param name="allowScriptAccess" value="sameDomain" />
              <!--<![endif]--> 
              <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> 
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        </div>
        <div id="paint-bottom">
          <div>
            <div align="center">
              <div id="accordion-2">
                <dl>
                  <dt>Sign up</dt>
                  <dd>
                    <h2>Sign up with us!</h2>
                    <p>

  <g:form controller='register' action='register' name='registerForm'>

    <g:if test='${emailSent}'>
      <br/>
      <g:message code='spring.security.ui.register.sent'/>
    </g:if>
    <g:else>
      <table>
        <tbody>

        <s2ui:textFieldRow name='email' bean="${command}" value="${command.email}"
                           size='40' labelCode='user.email.label' labelCodeDefault='E-mail'/>

        <s2ui:passwordFieldRow name='password' labelCode='user.password.label' bean="${command}"
                               size='40' labelCodeDefault='Password' value="${command.password}"/>

        <s2ui:passwordFieldRow name='password2' labelCode='user.password2.label' bean="${command}"
                               size='40' labelCodeDefault='Password (again)' value="${command.password2}"/>

        <s2ui:textFieldRow name='name' bean="${command}" value="${command.name}"
                           size='40' labelCode='user.name.label' labelCodeDefault='Name'/>

        <s2ui:textFieldRow name='lastname' bean="${command}" value="${command.lastname}"
                           size='40' labelCode='user.lastname.label' labelCodeDefault='Lastname'/>

        <s2ui:textFieldRow name='address1' bean="${command}" value="${command.address1}"
                           size='40' labelCode='user.address1.label' labelCodeDefault='Address1'/>

        <s2ui:textFieldRow name='address2' bean="${command}" value="${command.address2}"
                           size='40' labelCode='user.address2.label' labelCodeDefault='Address2'/>

        <s2ui:textFieldRow name='postal' bean="${command}" value="${command.postal}"
                           size='40' labelCode='user.postal.label' labelCodeDefault='Postal'/>

        <s2ui:textFieldRow name='phonenumber' bean="${command}" value="${command.phonenumber}"
                           size='40' labelCode='user.phonenumber.label' labelCodeDefault='PhoneNumber'/>
        </tbody>
      </table>

      <s2ui:submitButton elementId='create' form='registerForm' messageCode='spring.security.ui.register.submit'/>

    </g:else>

  </g:form>
                    </p>
                  </dd>
                  <g:if test="${params.active=='3'}"><dt></g:if>
                  <g:else>
                    <dt class="active"></g:else>
                  Login</dt>
                  <dd>
                    <h2>Login here!</h2>
                    <g:if test="${flash.message}">
                      <div id="caution">${flash.message}</div>
                    </g:if>
                    <p>
                      <div class="loginPanel" style='text-align:center;'>
                        <div class="login-inner">
                          <form action='${postUrl}' method='POST' id="form" name="loginForm" autocomplete='off'>
                              <table>
                                <tr>
                                  <td><label for="username"><g:message code='spring.security.ui.login.username'/></label></td>
                                  <td><input name="j_username" id="username" size="20" /></td>
                                </tr>
                                <tr>
                                  <td><label for="password"><g:message code='spring.security.ui.login.password'/></label></td>
                                  <td><input type="password" name="j_password" id="password" size="20" /></td>
                                </tr>
                                <tr>
                                  <td colspan='2' align="left">
                                    <input type="checkbox" class="checkbox" name="${rememberMeParameter}" id="remember_me" checked="checked" />
                                    <label for='remember_me'><g:message code='spring.security.ui.login.rememberme'/></label>
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan='2' align="left">
                                    <s2ui:submitButton elementId='login' form='loginForm' messageCode='spring.security.ui.login.login'/>
                                  </td>
                                </tr>
                              </table>
                          </form>
                        </div>
                      </div></p>
                    <p><a href="#?w=500" rel="popup_name" class="poplight">Enter site without logging in</a>
                  </dd>
                  <g:if test="${params.active=='3'}"><dt class="active"></g:if>
                  <g:else><dt></g:else>
                  Forgot Password?</dt>
                  <dd>
                    <h2>Forgot your password?</h2>
                    <g:if test="${flash.error}">
                      <div id="caution">${flash.error}</div>
                    </g:if>
                    <p>
                      <g:form controller="register" action='forgotPassword' name="forgotPasswordForm" autocomplete='off'>

                        <g:if test='${params.emailSent}'>
                          <g:message code='spring.security.ui.forgotPassword.sent'/>
                        </g:if>

                        <g:else>

                          <g:message code='spring.security.ui.forgotPassword.description'/>
                          <br><br>
                              <table>
                                <tr>
                                  <td><label for="username"><g:message code='spring.security.ui.forgotPassword.username'/></label></td>
                                  <td><g:textField name="username" size="25" /></td>
                                </tr>
                              </table>

                              <s2ui:submitButton elementId='reset' form='forgotPasswordForm' messageCode='spring.security.ui.forgotPassword.submit'/>

                              </g:else>

                              </g:form>

                              </p>
                              </dd>
                              </dl>
                              </div>
                              <div>
                                <div id="popup_name" class="popup_block">
                                  <h2>Enter the site without logging in?</h2><br><br>
                                  <p>You will need to log in before commenting, rating, subscribing to newsletter or purchasing any item. However, you will be able to browse through our products.</p>
                                  <p id="btn"> <a href="">Cancel</a><img src="../../images/icon_cancel.png" /><a href="http://toonwatch.comp.nus.edu.sg/home.gsp">Yes</a><img src="../../images/icon_next.png" /></p>
                                </div>


                                <script>
$(document).ready(function() {
$('#username').focus();
});

<s2ui:initCheckboxes/>

</script>

</body>
</html>

